<template>
	<view>
		<!-- <u-navbar @leftClick="naviBack" title="确认订单" bgColor="#12BAA4"  safeAreaInsetTop="true"></u-navbar> -->
		<view class="wrap">
			<!-- 账号信息 -->
			 <view class="conetent" style="display: flex;">
				<view class="info-left">
					<text class="title" v-if="false">微信昵称:</text>
					<text class="title">手机号:</text>
				</view>
			 	<view class="info-right">
			 		<text class="value" v-if="false">{{vxName}}</text>
			 		<text class="value">{{memberPhone}}</text>
			 	</view>
			 </view>
			 
			 <!-- 活动信息 -->
			 <view class="conetent">
			 	<view class="activity-title">
			 		{{activityInfo.activityName}}
			 	</view>
				<view v-if="activityInfo.timeEnd">
					<text class="title2">活动时间:</text>
					<text class="value2">{{activityInfo.timeStart}}至{{activityInfo.timeEnd}}</text>
				</view>
				<view class="numberBox">
					
					<view class="amount" style="margin-top: 40upx;font-size: 22upx;margin-bottom: 5upx;">
					 ¥<text class="amount">{{activityInfo.nowPrice}}</text>
					</view>
					
					<u-number-box v-model="count" @change="change" bgColor="#fff" :step="1" :max="activityInfo.countNumber">
						
						<view
							slot="minus"
							style="width: 41upx;height: 46upx;border: 1upx solid #DBDBDB;display: flex;align-items: center;justify-content: center;"
						>
							<u-icon
								name="minus"
								size="12"
							></u-icon>
						</view>
						<text
							slot="input"
							style="width: 76upx;height: 46upx;text-align: center;border: 1upx solid #DBDBDB;border-width: 1upx 0;"
							class="input"
						>{{count}}</text>
						<view
							slot="plus"
							style="width: 41upx;height: 46upx;border: 1upx solid #DBDBDB;display: flex;align-items: center;justify-content: center;"
						>
							<u-icon
								name="plus"
								color="#F83C57"
								size="12"
							></u-icon>
						</view>
						
					</u-number-box>
				</view>
				
				
			 </view>
			 
			 <!-- 商品说明 -->
			 <view class="goodsContent" v-if="activityInfo.goodsVoList">
				<view class="sectionTitle">商品说明</view>
			 	<view v-for="(item, index) in activityInfo.goodsVoList" :key="index">
			 		<detail-commodity
			 		 :commodityTitle="item.goodsServerName"
			 		 :commodityDesc="item.goodsServerDescribe"
			 		 :count="item.goodsServerNumber"
			 		 :totalAmount="item.goodsServerPrice"
					 :totalPrice="'{{item.goodsServerNumber * item.goodsServerPrice}}'"
			 		></detail-commodity>
			 	</view>
			 </view>
			 
			 <view class="bottomView">
			 	  <view class="leftView">
			 	     共计{{count}}件，合计： ¥
						<text class="amount">{{totalPrice}}</text>
			 	  </view>
					<view class="rightBtn" @click.stop="confim">
						支付
					</view>
			 </view>
			 
			 
			<!-- <u-modal 
			 :show="showAlert"  
			 title="提示" 
			 content="您确认支付吗?" 
			 :showCancelButton="true"
			 @confirm="confim"
			 @cancel="showAlert=false"
			 ></u-modal> -->
		</view>
	</view>
</template>

<script>
	import homeTitle from '../../components/layout/mmv-home-title.vue'
	import detailCommodity from '../../components/activity/activity-detailCommodity.vue'
	import {apiActivityInfo, seckillOrder,cancelActivityOrder} from '../../common/api.js'
	import moment from '@/util/moment.js'
	
	export default {
		components: {
			detailCommodity,
			homeTitle
		},
		data() {
			return {
				activityId : '',
				activityInfo : {},
				count : 1,
				// totalPrice : 0,
				showAlert : false,
				vxName : '',
				memberPhone : '',
				orderNo:'',
				orderno:'',
				amount:0,
			}
		},
		
		computed: {
		  totalPrice() {
				let count = this.count;
			 let price =	this.activityInfo.nowPrice * count;
			 let resultPrice = parseFloat(price).toFixed(2);
			 return  resultPrice
			}
		},
		
		methods: {
			//获取定位信息
			getLocation() {
				uni.getLocation({
				    type: 'wgs84',
				    success:  (res => {
							this.lat = res.latitude;
							this.lon = res.longitude;
							this.getData();
						}),
					fail:(e=>{
						this.getData();
					})
				});
			},
			//获取详情数据
			getData() {
			let that = this;
			 apiActivityInfo({
				 bizNo : that.activityId,
				 lon : this.lon,
				 lat : this.lat
			 }).then(res => {
				 this.activityInfo = res;
				 this.totalPrice = this.activityInfo.nowPrice*this.count;
			 })
			},
			change(e) {
				this.count = e.value;
				this.totalPrice = this.activityInfo.nowPrice*this.count;
				if(this.count > this.activityInfo.countNumber) {
					this.count = this.activityInfo.countNumber;
				}
			},
			confim() {
				var that = this;
				
				uni.showLoading();
				
				seckillOrder({
					bizNo:this.activityId,
					memberNo : this.$store.state.user.userInfo.customerId,
					number : this.count,
					amount : this.totalPrice,
					deptId:this.$store.state.user.deptId,
					deptName:this.$store.state.app.storeInfo.storeName
				}).then(res=> {
					//唤起微信支付
					let data = JSON.parse(res.json)
					
					this.orderno = res.orderNo;
					this.amount = res.amount;
					
					that.showAlert = false;
					uni.hideLoading();
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							
							that.recordOrder();
							
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: './activity-paySuccess?totalPrice='+ that.totalPrice
								})
							}, 1000)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							cancelActivityOrder({
								bizNo : res.orderNo,
							}).then(res=>{
								uni.showToast({
									title: '取消支付,订单自动取消',
									icon: 'none'
								})
							})
						}
					});
				}).catch(e=>{
					uni.hideLoading()
				})
				
			},
			
			//下单操作记录
			async recordOrder(){
				console.log('进入操作记录了');
				
				let nowTimes = new Date().getTime();
				
				let duration = Math.round((nowTimes - getApp().globalData.taskStartTime)/1000);
				
				//访问
				this.$store.dispatch('home/recordUse', {
					recordType:4,
					recordOrderId:this.orderno,
					objRecordData:{
						durationTime:duration,
						recordTime:moment(nowTimes).format('YYYY-MM-DD HH:mm:ss'),
						price:this.amount
					}
				})
			},
			
			naviBack() {
				uni.navigateBack({
					
				})
			}
		},
		
		onLoad(op) {
			this.activityId = op.bizNo;
			this.vxName = this.$store.state.user.userInfo.nickName;
			this.memberPhone = this.$store.state.user.userInfo.phone;
			this.getLocation();
		}
	}
</script>

<style lang="scss" scoped>
.conetent {
	border-radius: 18upx;
	padding: 20upx;
	margin: 25upx;
	background-color: #fff;
	
	.info-left{
		// margin-top: 10upx;
		// height: 80upx;
		@include flex(column);
		width: 130upx;
		justify-content: space-between;
	}
	
	.info-right{
		// height: 80upx;
		// margin-top: 10upx;
		@include flex(column);
		justify-content: space-between;
	}
	
		
		
	.activity-title {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		color: #333333;
		margin: 10upx 0 20upx 0;
	}
}

.title {
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC-Medium;
	// font-weight: bold;
	color: #999;
}
.value {
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC-Medium;
	// font-weight: bold;
	color: #333;
	margin-left: 20upx;
}

.title2 {
	font-size: 22upx;
	font-family: PingFang SC, PingFang SC-Medium;
	// font-weight: bold;
	color: #999;
}
.value2 {
	font-size: 22upx;
	font-family: PingFang SC, PingFang SC-Medium;
	// font-weight: bold;
	color: #333;
	margin-left: 20upx;
}
.amount {
	font-size: 28upx;
	font-family: PingFang SC, PingFang SC-Medium;
	font-weight: bold;
	text-align: left;
	color: #F83C57;
}

.numberBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 10upx;
}
.commodity {
	border-radius: 18upx;
	position: relative;
	width: 700upx;
	top: 40upx;
	left: -45upx;
}


.bottomView {
		display: flex;
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		position: fixed;
	  bottom: 0;
		left: 0;
		z-index: 1;
}
	
		
	.leftView {
		display: flex;
		justify-content: center;
		align-items: center;
	 width: 50%;
	 color: #666;
	 background-color: #FFFFFF;
	 font-size: 24upx;
	 font-weight: bold;
	}
	.rightBtn {
		width: 50%;
		color: #fff;
		background-color: #F83C57;
		line-height: 100%;
		font-size: 33upx;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 10upx;
		font-weight: bold;
	}
	
	.sectionTitle {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
		margin: 30upx 0 30upx 10upx;
	}
.goodsContent {
	margin: 25upx;
}
</style>
